<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件2</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			#box{
				width: 300px;
				/* 外边距上下为0 左右自适应 */
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="box">
			搜索：<input type="text" placeholder="请输入搜索内容" 
			v-model="search" @keydown.enter="searchCon" @keyup="content">
			<br>
			密码：<input type="password" @keydown.caps-lock="capsLock" placeholder="请输入密码" >{{ message }} 
			<br>
			备忘录：<input type="text" @keydown.ctrl.s="save">
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#box',
				data:{
					search:"",
					message:"提示文字"
				},
				methods:{
					content(){
						//this就等于vm
						console.log("我输入了内容",this.search)
					},
					searchCon(){
						//按回车 开始搜索
						alert("你正在搜索："+this.search);
					},
					capsLock(){
						//赋值
						this.message = "打开了大写";
					},
					save(){
						alert("已经保存好你的内容")
					}
				}
			})
		</script>
	</body>
</html>
